<template>
  <div>
    <button @click="changePassShow">修改密码</button>
    <div class="grid_box" v-show="form_show">
      <input type="text" name="anti_autoComplete_user" hidden />
      <input type="password" name="anti_autoComplete_pwd" hidden />
      <div class="form_box">
        <span class="key_name">原密码</span>
        <span class="input">
          <input type="password" v-model="last_pwd" required />
        </span>
        <span class="key_name">新密码</span>
        <div class="input">
          <input type="password" v-model="new_pwd" required />
        </div>
        <span class="form_tip">
            <img class="pwd_tip" src="@/assets/true_pic.png" alt="密码符合规范" v-show="access" />
            <img class="pwd_tip" src="@/assets/false_pic.svg" alt="密码不规范" v-show="!access" />
        </span>
        <span class="pass_tip" v-show="!access">
          密码长度8-20个字符，需同时含有数字、大写字母、小写字母，且不含空格
        </span>
        <span class="key_name">确认密码</span>
        <span class="input">
          <input type="password" v-model="check_pwd" required />
        </span>
        <span class="form_tip">
          <img class="pwd_tip" src="@/assets/true_pic.png" alt="密码一致" v-show="pwdr_acc" />
          <img class="pwd_tip" src="@/assets/false_pic.svg" alt="密码不一致" v-show="!pwdr_acc" />
        </span>
        <span class="key_name">验证码</span>
        <div class="input checkPic_code">
          <div>
            <input type="text" v-model="pic_check" required />
          </div>
          <img class="check_pic" :src="this.pic_src" alt="验证码加载失败" />
        </div>
        <span class="form_tip">
          <a href="#" @click="changePic">换一张</a>
        </span>
      </div>
      <div>
        <button @click="valueEnbale">更改</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { spawnKey,infoEncode } from "@/assets/infoEncode.js";

export default {
  name:'PwdChange',
  data() {
    return {
      user_name: this.$store.state.userName,
      cli_id: this.$store.state.clientId,
      last_pwd:'',
      new_pwd:'',
      check_pwd:'', // 确认密码
      check_code: '', // 随机补全码
      pic_check:'', // 用户输入的验证码
      passcode: '',
      timestamp: '', 
      form_show:false, // 表单显示
      pic_src:'' // 验证码信息
    }
  },
  computed: {
    pwdr_acc(){
      if (Boolean(this.check_pwd) ==false) {
        return false
      }else{
        return this.new_pwd === this.check_pwd;
      }
    },
    access() {
      if (this.new_pwd.length > 7 && this.new_pwd.length < 21) {
        // 强度计算
        let value_check = /^[\x21-\x7E]+$/g.test(this.new_pwd);
        let hard_check = /[A-Z]/g.test(this.new_pwd) +
          /[0-9]/g.test(this.new_pwd) +
          /[a-z]/g.test(this.new_pwd);
        return value_check && hard_check >= 3;
      }
      else {
        return false;
      }
    },
    request_enable(){
      // 填写有效性检测
      return Boolean(this.user_name) && Boolean(this.access) && Boolean(this.pic_check) && Boolean(this.pwdr_acc);
    }
  },
  methods: {
    changePassShow(){
      this.form_show = !this.form_show;
    },
    getPic(){
      const pic_require = axios.create({
        baseURL: "",
      });
      var cli_info = {
        clientid: this.cli_id,
        // timestamp: new Date().toLocaleString()
      };
      pic_require({
        url: "/apiPic",
        method:'POST',
        data: cli_info
      }).catch(function (error) {
        if (error.response) {
          console.log('验证码请求失败',error.response.status);
        } else {
          console.log('Error', error.message);
          console.log(error.config);
        }
      }).then((res) => {
        if (!res){//未收到数据，跳出函数
          return
        }
        if (res['data']=='resetID') {
          console.log('未收到数据');
          if (this.request_time < 10) {
            this.request_time++
            localStorage.removeItem('clientId');
            setTimeout(() => {
              this.markId(); // 重置id
            }, 300);
          }
        }else{
          // 存储验证码
          var data = res['data']
          this.pic_src = 'data:;base64,'+data;
        }
      });
    },
    valueEnbale() {
      // 完整性检查
      if (this.request_enable) {
        this.encode();
      }
      else {
        window.alert("填写信息不完整");
      }
    },
    encode() {
      var code = (this.pic_check).toLowerCase();
      let key_list = spawnKey(code);
      let se_key = key_list[0];
      let rand_code = key_list[1];
      let spawn_time = key_list[2];
      this.check_code = rand_code;
      this.timestamp = spawn_time;
      this.passcode = {'last':infoEncode(se_key,this.last_pwd),'new':infoEncode(se_key,this.new_pwd)} ;
      this.send();
    },
    send() {
      const requireA = axios.create({
        baseURL: "",
      });
      var post_info = {
        clientid: this.cli_id,
        password: this.passcode,
        account: this.user_name,
        timestamp: this.timestamp,
        checkcode: this.check_code,
        token: this.$store.state.token
      };
      requireA({
        url: "/apiUpdatePwd",
        method: "POST",
        data: post_info,
      }).catch(function (error) {
        if (error.response) {
          console.log('修改请求失败',error.response.status);
        }else{
          console.log('通信连接失败');
        }
      }).then((res)=>{
        window.alert(res['data']);
      });
    },
    changePic(){
      this.getPic();
    }
  },
  mounted() {
    this.getPic();
  },
}
</script>

<style scoped>
.pwd_tip{
  width: 20px;
  height: 20px;
}
.pass_tip{
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row: 3;
  margin: auto;
  width: 380px;
  color: red;
}
</style>